<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigbox{
            height: 300px;
            width: 500px;
            /* background-color: beige; */
            margin: 100px auto;
            text-align: center;
            overflow: hidden;
            box-shadow: 0px 0px 5px -1px;
        }
        .Box{
            width: 400px;
            height: 250px;
            margin: 56px auto;
        }
        .box{
            margin-top: 20px;
            text-align: center;
        }
        .box input{
            height: 30px;
            width: 250px;
            padding-left: 15px;
            border-radius: 7px;
        }
        .forget{
            width: 340px;
        }
        .forget p{
            font-size: 12px;
            color: rgba(0, 0, 255, 0.699);
            text-align: right;
        }
        .denglu input{
            height: 30px;
            width: 270px;
            border-radius: 7px;
            color: aliceblue;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="Box">
            <div class="box">
                <input type="text" placeholder="手机号/用户名/邮箱">
            </div>
            <div class="box">
                <input type="password" placeholder="密码">
            </div>
            <div class="forget">
                <p>忘记密码？</p>
            </div>
            <div class="denglu">
                <input type="button" value="登录">
            </div>
        </div>
    </div>
</body>
</html>
<script src="./promise封装函数.js"></script>
<script>
    //获取所有的点击按钮
    var inputs=document.querySelectorAll('input')
    //给登录按钮添加点击事件
    inputs[2].onclick=function(){
        // console.log(inputs[2]);
        //进行为空判断
        if(inputs[0].value&&inputs[1].value){
           //进行手机号/密码校验
           if(/^1[3-9]\d{9}$/.test(inputs[0].value) && /^\d{4}$/.test(inputs[1].value)){
               ajax('get','https://yantianfeng.com/api/login',{
                username:inputs[0].value,
                password:inputs[1].value
               }).then((data)=>{
                  if(data.status==200){
                    alert('登录成功')
                  }else{
                    alert('登录失败')
                  }
               })
           }else{
            alert('手机号/密码有误！')
           }
        }else{
            alert('手机号/密码不能为空！')
        }
    }
    
</script>
